<template>
  <div class="patient-dashboard">
    
    <div class="container">
      <!-- 左侧信息栏 -->
      <div class="sidebar">
        <div class="user-info">
          <div class="avatar"><el-avatar :size="50" src="src\images\u4164.png" /></div>
          <div class="name">杨景泽</div>
          <div class="level"><el-tag size="small" type="danger">一级</el-tag></div>
        </div>
        <div class="info-item">
          <span>男 · 29岁</span>
        </div>
        <div class="info-item">
          <span>身份证号：5298******6743</span>
        </div>
        <div class="info-item">
          <span>联系电话：13030199209</span>
        </div>

        <div class="section">
          <h4>慢病标签</h4>
          <el-tag size="small" type="info">高血压</el-tag>
          <el-tag size="small" type="warning">2型糖尿病</el-tag>
        </div>

        <div class="section">
          <h4>风险评估</h4>
          <el-link type="primary" :underline="false">+风险评估</el-link>
          <div class="risk-level">
            <el-tag type="danger" size="small">脑卒中高危</el-tag>
          </div>
        </div>

        <div class="section">
          <h4>依从性</h4>
          <el-link type="primary" :underline="false">详情</el-link>
          <el-tag type="success" size="small">优秀</el-tag>
        </div>

        <div class="section">
          <h4>健康概况</h4>
          <el-link type="primary" :underline="false">修改</el-link>
          <div class="health-summary">
            <p>身高：165CM &nbsp;&nbsp; 体重：62KG</p>
            <p>BMI：21.7 &nbsp;&nbsp; 腰围：</p>
            <p>是否吸烟：否</p>
            <p>是否饮酒：否</p>
            <p>是否运动：否</p>
          </div>
        </div>

        <div class="section">
          <h4>服务概况</h4>
          <el-link type="primary" :underline="false">详情</el-link>
          <div class="service-summary">
            <p>签约日期：2023-03-12</p>
            <p>到期日期：2023-08-12</p>
            <p>服务包：高血压基础管理包</p>
          </div>
        </div>
      </div>

      <!-- 主内容区 -->
      <div class="main-content">
        <div style="width: 1200px;">
          <!-- 顶部导航标签 -->
        <div style="margin-bottom: 20px;width: 1000px;text-align: left; display: inline-block;margin-right: 80px;">
          <el-button @click="">总览</el-button>
          <el-button @click="toHealthMonitoringView()">健康监测</el-button>
          <el-button @click="toDiagnosisTreatmentView()">慢病诊疗</el-button>
          <el-button @click="toHealthInterventionView()">健康干预</el-button>
          <el-button @click="toDiagnosisManagementView()">随访管理</el-button>
          <el-button @click="toRiskAssessmentView()">风险评估</el-button>
          <el-button @click="toHealthEducationView()">健康宣教</el-button>
          <el-button @click="">签约信息</el-button>
        </div>

        <!-- 顶部返回按钮 -->
    <div class="header-actions" style="width: 100px;text-align: right; display: inline-block;">
      <el-button type="primary" icon="Back" @click="toChronicDataList()">返回</el-button>
    </div>
        </div>

        <!-- 内容卡片布局 -->
        <div class="cards-layout" style="width: 1200px;">
          <div style="width: 800px;">
            <div  style="width: 800px;">
              <div style=" width: 370px;text-align: left; display: inline-block;">
                <!-- 待办事项 -->
                <el-card class="card-item" shadow="hover" style="width: 390px;">
                  <template #header>
                    <span>待办事项</span>
                  </template>
                  <div class="task-item">
                    <el-icon color="#000"><CircleFilled /></el-icon>
                    <span>脑卒中高危评估</span>
                    <el-link type="primary" :underline="false">处理</el-link>
                  </div>
                </el-card>
              </div>
              
              <div style=" width: 390px;text-align: right; display: inline-block;margin-left: 40px;">
                <!-- 消息预警 -->
                <el-card class="card-item" shadow="hover" style="width: 390px; ">
                  <template #header>
                    <span>消息预警</span>
                  </template>
                  <div class="alert-item">
                    <span>血压测量值异常 2023-05-11 10:10:12</span>
                    <el-link type="primary" :underline="false">查看</el-link>
                  </div>
                </el-card>
              </div>
            </div>
            <br>
            <div style="height: 800px;">
              <!-- 健康干预方案 -->
              <el-card class="card-item full-width" shadow="hover" style="height: 780px;" >
                <template #header>
                  <span>健康干预方案</span>
                </template>
                <div class="intervention-container">
                  <div class="goal-table" style="width: 350px;">
                    <h4>健康目标</h4>
                    <el-table :data="healthGoals" border style="width: 100%">
                      <el-table-column prop="item" label="项目" width="150" />
                      <el-table-column prop="targetValue" label="目标值" />
                      <el-table-column prop="currentValue" label="当前值" />
                    </el-table>
                  </div>
                  <div class="plan-table">
                    <h4>干预方案</h4>
                    <el-table :data="interventionPlans" border style="width: 100%">
                      <el-table-column prop="name" label="方案名称"  width="130" />
                      <el-table-column prop="period" label="目标周期"  width="180" />
                      <el-table-column label="操作"  width="80">
                        <template #default="{ row }">
                          <el-link type="primary" :underline="false">查看</el-link>
                        </template>
                      </el-table-column>
                    </el-table>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
          <br>
          <!-- 右侧服务记录 -->
          <div class="right-content" style="width: 350px;margin-left: 20px;">
            <el-card shadow="hover">
              <template #header>
                <span>服务记录</span>
              </template>
              <el-timeline>
                <!-- 2023年 -->
                <el-timeline-item timestamp="2023年" placement="top" type="primary">
                  <el-timeline-item timestamp="02-12" color="#000">
                    <div>并发症筛查</div>
                    <div class="sub-item">慢阻肺筛查</div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="01-12" color="#000">
                    <div>药物干预</div>
                    <div class="sub-item">高危药品干预方案</div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="01-10" color="#000">
                    <div>双向转诊</div>
                    <div class="sub-item">中心医院</div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="01-05" color="#000">
                    <div>运动干预</div>
                    <div class="sub-item">一级高血压康复运动方案</div>
                  </el-timeline-item>
                </el-timeline-item>

                <!-- 2022年 -->
                <el-timeline-item timestamp="2022年" placement="top" type="primary">
                  <el-timeline-item timestamp="12-12" color="#000">
                    <div>并发症筛查</div>
                    <div class="sub-item">慢阻肺筛查</div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="11-12" color="#000">
                    <div>药物干预</div>
                    <div class="sub-item">高危药品干预方案</div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="11-10" color="#000">
                    <div>双向转诊</div>
                    <div class="sub-item">中心医院</div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="11-05" color="#000">
                    <div>运动干预</div>
                    <div class="sub-item">一级高血压康复运动方案</div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="11-05" color="#000">
                    <div>运动干预</div>
                    <div class="sub-item">一级高血压康复运动方案</div>
                  </el-timeline-item>
                  <el-timeline-item timestamp="11-05" color="#000">
                    <div>慢病签约</div>
                    <div class="sub-item">XX团队</div>
                  </el-timeline-item>
                </el-timeline-item>
              </el-timeline>
            </el-card>
          </div>
        </div>
        
      </div>

      
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import {
  User,
  Back,
 
} from '@element-plus/icons-vue'

const buttons = [
  { type: 'primary', text: '总览' },
  { type: 'primary', text: '健康监测' },
  { type: 'primary', text: '慢病诊疗' },
  { type: 'primary', text: '健康干预' },
  { type: 'primary', text: '随访管理' },
  { type: 'primary', text: '风险评估' },
  { type: 'primary', text: '健康宣教' },
  { type: 'primary', text: '签约信息' },
] as const

//跳转到健康宣教
const toHealthEducationView = () =>{
  location.href = '/HealthEducationView'
}
//跳转到慢病管理
const toDiagnosisManagementView = () =>{
  location.href = '/DiagnosisManagementView'
}
//跳转到风险评估
const toRiskAssessmentView = () =>{
  location.href = '/RiskAssessmentView'
}

//跳转到健康监测
const toHealthMonitoringView = () =>{
  location.href = '/HealthMonitoringView'
}
//跳转到慢病诊疗
const toDiagnosisTreatmentView = () =>{
  location.href = '/DiagnosisTreatmentView'
}

//跳转到健康干预
const toHealthInterventionView = () =>{
  location.href = '/HealthInterventionView'
}



const activeTab = ref('overview')

// 健康目标数据
const healthGoals = [
  { item: '体重', targetValue: '130', currentValue: '140' },
  { item: 'BMI', targetValue: '160', currentValue: '200' },
  { item: '收缩压', targetValue: '160', currentValue: '180' },
  { item: '舒张压', targetValue: '180', currentValue: '190' },
  { item: '空腹血糖', targetValue: '190', currentValue: '220' },
  { item: '餐后2小时血糖', targetValue: '195', currentValue: '210' },
  { item: '总胆固醇', targetValue: '130', currentValue: '160' },
  { item: '甘油三酯', targetValue: '180', currentValue: '160' },
  { item: '低密度脂蛋白', targetValue: '130', currentValue: '155' },
  { item: '高密度脂蛋白', targetValue: '110', currentValue: '120' },
]

// 干预方案数据
const interventionPlans = [
  {
    name: '饮食减脂方案',
    period: '2023-01-01~2023-01-31',
  },
  {
    name: '轻量运动方案',
    period: '',
  }
]

const toChronicDataList = () =>{
  location.href = '/ChronicDataListView'
}
</script>

<style scoped>
.patient-dashboard {
  padding: 20px;
  background-color: #f5f7fa;
  font-family: "Helvetica Neue", Arial, sans-serif;
}

.header-actions {
  margin-bottom: 20px;
  text-align: right;
}

.right-content {
  width: 300px; /* 固定宽度，可根据需要调整 */
  flex-shrink: 0; /* 防止收缩 */
}

.container {
  display: flex;
  gap: 20px;
}

.sidebar {
  width: 260px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.sidebar .user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}

.name {
  font-size: 18px;
  font-weight: bold;
}

.level {
  margin-left: 10px;
}

.info-item {
  margin: 10px 0;
  font-size: 14px;
  color: #666;
}

.section {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.section h4 {
  margin: 0 0 10px 0;
  font-size: 16px;
  color: #333;
}

.risk-level {
  margin-top: 8px;
}

.health-summary p,
.service-summary p {
  margin: 8px 0;
  font-size: 14px;
  color: #555;
}

.main-content {
  flex: 1;
  min-width: 0;
}

.tabs {
  margin-bottom: 20px;
}

.cards-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 20px;
}

.card-item {
  min-height: 180px;
}

.full-width {
  grid-column: span 2;
}

.task-item,
.alert-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}

.task-item .el-icon {
  margin-right: 8px;
}

.intervention-container {
  display: flex;
  gap: 20px;
}

.goal-table,
.plan-table {
  flex: 1;
}

.goal-table h4,
.plan-table h4 {
  margin: 0 0 15px 0;
  font-size: 16px;
  color: #333;
}

.sub-item {
  font-size: 13px;
  color: #888;
  margin-left: 10px;
}

.sidebar-right {
  width: 300px;
}

.sidebar-right .el-card {
  height: 100%;
  overflow-y: auto;
}

/* 自定义时间轴样式 */
.el-timeline-item__timestamp {
  font-weight: bold;
  color: #333;
}

.el-timeline-item__wrapper {
  padding: 10px 0;
}

@media (max-width: 1200px) {
  .container {
    flex-direction: column;
  }
  .sidebar-right {
    width: 100%;
  }
}
</style>